<template>
	<div id="app">
		<div class="chat" v-show="show">
			<i class="el-icon-error" @click="show=false"></i>
			<div class="left">
				<div v-for="(item,index) in chatList" :key="index" class="chatList"
					 :class="cur==index ? 'active':''">
					<div>
						<img :src="item.avatar" alt="" width="42px" height="42px">
					</div>
					<div>
						<div>{{item.name}}</div>
						<div>{{item.msg}}</div>
					</div>
					<div>{{item.time}}</div>
					<div class="unread" v-show="item.unread && item.unread!=0">{{item.unread}}</div>
				</div>
			</div>
			<div class="right">
				<div class="top" ref="top">
					<div class="msgList" v-for="(item,index) in msgList" :key="index"
						:class="item.from=='he' ? '':'goRight'">
						<img :src="item.avatar" alt="" width="42px" height="42px" v-show="item.from=='he'">
						<div>
							<div :style="{textAlign:item.from=='me' ? 'right':''}">{{item.name}}</div>
							<div>{{item.msg}}</div>
							<div :style="{textAlign:item.from=='me' ? 'right':''}">{{item.time}}</div>
						</div>
						<img :src="item.avatar" alt="" width="42px" height="42px" v-show="item.from!='he'">
					</div>
				</div>
				<div class="down">
					<div>
						<textarea cols="50" rows="10"  v-model="text"
							style="border: 0;font-size: 14px;" :disabled="!chatId"></textarea>
					</div>
					<!-- <button @click="beforeSendMsg" :disabled="!chatId" :style="{backgroundColor:chatId ? '':'#ddd',cursor:chatId ?'':'not-allowed'}">发送</button> -->
					<!-- <button @click="testMessageReceived()">测试</button> -->
					<button>接收</button>
				</div>
			</div>
		</div>
		<div style="position: fixed;bottom: 20px;right: 20px;cursor: pointer;" @click="show=true">
			<img src="../assets/icon-customer.png" alt="">
		</div>
	</div>
</template>

<script>
	import db_config from "../utils/db_config.js"
	import {
		login
	} from "../api/test.js"
	import {
		getLocal,
		setLocal
	} from "../utils/storage.js"

	export default {
		data() {
			return {
				show: false,
				chatList:[],
				msgList:[],
				text:"",
				chatId:""
			}
		},
		created() {
			
		},
		mounted() {
			
		},
		watch: {
			
		},
		methods: {
			
		},
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: goldenrod !important;
	}
	//修改滚动条样式
	.left::-webkit-scrollbar, .top::-webkit-scrollbar{
		width: 10px;
	}

	.left::-webkit-scrollbar-thumb ,.top::-webkit-scrollbar-thumb{
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		opacity: 0.2;
		background:wheat;
	}

	.left::-webkit-scrollbar-track, .top::-webkit-scrollbar-track{
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 0;
		background:white;
	}

	.chat {
		width: 800px;
		height: 400px;
		background-color: #eee;
		box-shadow: 0 0 3px 4px #929ca8;
		display: flex;
		position: relative;
		position: fixed;
		top: 50%;
		left: 50%;
		// margin-left: -400px;
		// margin-top: -200px;
		transform: translate(-50%, -50%);
		z-index: 10000;

		.el-icon-error {
			position: absolute;
			top: -15px;
			right: -10px;
			font-size: 30px;
			cursor: pointer;
		}

		.top {
			height: 200px;
			border-bottom: 1px solid #333;
			overflow: auto;

			.goRight {
				display: flex;
				justify-content: end;
			}

			.msgList {
				display: flex;
				margin-bottom: 10px;

				&>div {
					margin: 0 5px;

					&>div:nth-child(3) {
						color: #333;
						font-size: 12px;
					}

					&>div:nth-child(2) {
						font-size: 12px;
						padding: 5px;
						background-color: #eee;
						max-width: 200px;
						word-wrap: break-word;
						box-sizing: border-box;
					}

					&>div:nth-child(1) {
						font-weight: bold;
						font-size: 14px;
					}
				}
			}
		}

		.down {
			height: 200px;
			position: relative;

			button:hover {
				background-color: greenyellow;
			}

			button {
				background-color: green;
				color: #fff;
				position: absolute;
				right: 10px;
				bottom: 10px;
				border-radius: 5px;
				border: 0;
				padding: 5px 15px;
			}
		}

		.left {
			background-color: #fff;
			width: 300px;
			height: 100%;
			border: 1px solid #333;
			overflow-y: auto;

			.chatList:hover {
				background-color: goldenrod;
			}

			.chatList {
				background-color: #ddd;
				font-size: 12px;
				display: flex;
				position: relative;
				cursor: pointer;
				margin-bottom: 10px;
				position: relative;

				.unread {
					position: absolute;
					top: 0;
					right: 0;
					background-color: red;
					color: #fff;
					padding: 3px;
				}

				&>div:nth-child(2) {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 13px;

					&>div:last-child {
						max-width: 200px;
						white-space: nowrap;
						overflow: hidden; //文本超出隐藏
						text-overflow: ellipsis; //文本超出省略号替代
					}

					&>div:first-child {
						font-weight: bold;
						font-size: 14px;
					}
				}

				&>div:nth-child(1) {
					margin-right: 20px;
				}

				&>div:nth-child(3) {
					position: absolute;
					top: 10px;
					right: 30px;
				}
			}
		}

		.right {
			background-color: #fff;
			width: 500px;
			height: 100%;

		}
	}

	.el-menu-vertical-demo {
		height: 100vh;
		overflow: hidden;
		width: 200px;
	}

	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
</style>
